<template>
  <div class="main">
    <div class="air-column">
      <h2>乘机人</h2>
      <el-form class="member-info">
        <div
          class="member-info-item"
          v-for="(item, index) in users"
          :key="index"
        >
          <el-form-item label="乘机人类型">
            <el-input
              placeholder="姓名"
              class="input-with-select"
              v-model="item.username"
            >
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="成人" value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="证件类型">
            <el-input
              placeholder="证件号码"
              class="input-with-select"
              v-model="item.id"
            >
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="身份证" value="1" :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member" type="primary" @click="handleAddUsers"
        >添加乘机人</el-button
      >
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <!-- 如果使用筛选框组，可以为复选框组添加一个v-model的绑定，那么后期组中的所有被选中的复选框的label值会自动的添加到这个v-model的绑定数组中 -->
        <el-checkbox-group v-model="insurances">
          <div
            class="insurance-item"
            v-for="(item, index) in data.insurances"
            :key="index"
          >
            <el-checkbox :label="item.id" border>
              {{
                `${item.type}：￥${item.price}/份×1  最高赔付${item.compensation}`
              }}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form label-width="60px">
          <el-form-item label="姓名">
            <el-input v-model="contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input placeholder="请输入内容" v-model="contactPhone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="captcha"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" class="submit" @click="handleSubmit"
          >提交订单</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      contactName: "bb", // 联系人
      contactPhone: "13456789098", // 联系电话
      insurances: [], // 保险
      captcha: "000000", // 验证码，后台接口文档中没有说明，但是要传递
      users: [
        // 乘机人
        {
          username: "",
          id: "",
        },
      ],
    };
  },
  mounted() {
    console.log(this.data);
  },
  methods: {
    // 添加乘机人
    handleAddUsers() {
      this.users.push({
        username: "",
        id: "",
      });
    },

    // 移除乘机人
    handleDeleteUser(index) {
      this.users.splice(index, 1);
    },

    // 发送手机验证码
    handleSendCaptcha() {
      // 在这里验证手机号是否输入合法
      if (!/^1[35789]\d{9}$/.test(this.contactPhone)) {
        this.$message.warning("手机号输入不合法");
        return;
      }
      this.$axios({
        method: "post",
        url: "/captchas",
        data: { tel: this.contactPhone },
      }).then((res) => {
        this.$confirm("本次验证码为：" + res.data.code, "提示", {
          confirmButtonText: "确定", //确认按钮文本
          cancelButtonText: "取消", //取消按钮文本
          type: "success",
        });
      });
    },

    // 提交订单
    handleSubmit() {
      // console.log(this.$store.state.user.userinfo.token)
      // 将当前path存储到store,以备不时之需
      // return
      this.$store.commit("user/setBackurl", location.href);
      // return
      // 先检测后台接口所要求的数据是否都有
      let data = {
        users: this.users,
        contactName: this.contactName, // 联系人
        contactPhone: this.contactPhone, // 联系电话
        insurances: this.insurances, // 保险
        captcha: this.captcha, // 一定要记得先发送获取验证码的请示
        invoice: false, // 是否需要发票，默认赋值False
        // air:this.$route.query.id,
        air: this.data.id,
        // seat_xid:this.$route.query.seat_xid
        seat_xid: this.data.seat_infos.seat_xid,
      };
      console.log(data);
      // JiPiao - 提交机票订单  http:127.0.0.1:1337/airorders
      this.$axios({
        method: "post",
        url: "/airorders",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userinfo.token,
        },
        data,
      }).then((res) => {
        console.log(res);
        this.$message.success("订单正在创建中，稍候跳转...");
        // 跳转到付款页
        setTimeout(() => {
          this.$router.push({
            path: "/air/pay",
          });
        }, 1000);
      });
    },
  },
};
</script>

<style scoped lang="less">
.air-column {
  border-bottom: 1px #ddd dashed;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.air-column h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: normal;
}

/deep/ .el-select .el-input {
  width: 130px;
}

.input-with-select {
  width: 590px;
}

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.member-info /deep/ .el-form-item {
  margin-bottom: 0;
}

.member-info-item {
  border-bottom: 1px #eee dashed;
  padding-bottom: 20px;
  position: relative;

  &:first-child {
    .delete-user {
      display: none;
    }
  }
}

.add-member {
  margin-top: 20px;
}

.delete-user {
  display: block;
  background: #ddd;
  width: 16px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: -30px;
  top: 50%;
}

.insurance {
  > div {
    margin-top: 10px;
  }
}

.insurance-item {
  margin-bottom: 20px;
}

.contact {
  /deep/ .el-input {
    width: 50%;
  }
}

.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}
</style>